<html lang="en"><head>
    <meta charset="UTF-8">

    <meta name="apple-mobile-web-app-title" content="CodePen">

    <title></title>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
    <script src="https://unpkg.com/@reactivex/rxjs@5.1.1/dist/global/Rx.min.js"></script>
</head>
<body translate="no">
<input type="checkbox" id="switch" />
<div id="app">
    <header class="ui-header">
        <i class="fa fa-chevron-left"></i>
        <div class="ui-text -app-title">App Settings</div>
        <div class="ui-text">Apply</div>
    </header>
    <main class="ui-content">
        <div class="ui-discounts">
            <i class="fa fa-codepen"></i>
            <div class="ui-text">Get hottest discounts</div>
        </div>
        <div class="ui-value">
            <div class="ui-digit" id="num1"></div>
            <div class="ui-digit" id="num2"></div>
        </div>
        <div class="ui-panel">
            <div class="ui-range-ticks">
                <div class="ui-range-tick" data-value="0"></div>
                <div class="ui-range-tick" data-value="3"></div>
                <div class="ui-range-tick" data-value="6"></div>
                <div class="ui-range-tick" data-value="9"></div>
                <div class="ui-range-tick" data-value="12"></div>
            </div>
            <div class="ui-range" id="rangeTrack">
                <input
                        type="range"
                        id="range"
                        class="ui-range-input"
                        min="0"
                        max="12"
                        step="1"
                        value="6"
                />
                <div class="ui-range-track">
                    <div class="ui-range-thumb"></div>
                </div>
            </div>

            <div class="ui-controls">
                <div class="ui-switch">
                    <label
                            class="ui-switch-track"
                            for="switch"
                            title="Turn smooth range thumb on/off"
                    >
                    </label>
                </div>
            </div>

            <div class="ui-footer">
                <i class="fa fa-shopping-bag"></i>
                <i class="fa fa-cart-arrow-down"></i>
                <i class="fa fa-filter"></i>
                <i class="fa fa-gear"></i>
            </div>
        </div>
    </main>
</div>

</body>
<script src="script.js"></script>
</html>